import React from 'react';
import { Form, Input, message, Descriptions, Switch, Button, Space, InputNumber, Select, Collapse, Avatar, Card } from 'antd';
import { connect } from 'umi';
import 'braft-editor/dist/index.css'
import moment from 'moment';
import { LockUser } from '@/services/member';
import UploadUtil from '@/components/UploadUtil';
import imgAvatar from '@/assets/avatar.png';

class MemberDetail extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            datas: {},
            point: 0,
            cascaderOption: [],
            contentEditor: '',
            inputValue: [7, 30],
            userArr: []
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        const { ParentData } = this.props;
        if (ParentData && ParentData.id) {
            this.getData(ParentData.id);
        }
        this.fetchUsers();
    }
    getData = (id: number) => {
        const { dispatch } = this.props;
        if (id) {
            dispatch({
                type: 'Abp/get',
                payload: { id },
                control: 'Members',
            }).then(() => {
                var result = this.props.response.result;
                this.setState({ datas: result, point: result.points });
            });
        }
    }
    fetchUsers = () => {
        this.props.dispatch({
            type: "Abp/getAll",
            payload: { SkipCount: 0, MaxResultCount: 9999 },
            control: 'User',
        }).then(() => {
            var resp = this.props.response?.result?.items;
            if (resp) {
                var arrs: any = [];
                resp.forEach((element: any) => {
                    var obj = {
                        value: element.id,
                        text: element.fullName
                    }
                    arrs.push(obj);
                });
                this.setState({ userArr: arrs });
            }
        });
    }
    UpdatePoints = () => {
        const { datas, point } = this.state;
        this.props.dispatch({
            type: "Member/updatePoints",
            payload: {
                memberId: datas.id,
                point
            },
        }).then(() => {
            var resp = this.props.Member.response;
            if (resp.success) {
                message.success('保存成功！');
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    }
    lock = async () => {
        const { datas } = this.state;
        await LockUser({ memberId: datas.id }).then((resp) => {
            this.getData(datas.id);
        });
    }
    onFinish = (values: any) => {
        const { datas } = this.state;
        values.memberId = datas.id;
        console.log(values);
        this.props.dispatch({
            type: 'Abp/create',
            payload: values,
            control: 'Edu_Message',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('通知发送成功！');
            }
            else {
                message.error('保存错误，请联系管理员');
            }
        });
    };
    render() {
        const { datas, point, userArr } = this.state;
        const options = userArr.map((d: any) => <Select.Option key={d.value} value={d.value}>{d.text}</Select.Option>);
        return (
            <div><Descriptions title="会员详情" bordered>
                <Descriptions.Item label="用户头像"><Avatar src={datas.avatar ? (UploadUtil.imgServ + datas.avatar) : imgAvatar} /></Descriptions.Item>
                <Descriptions.Item label="ID">{datas.id}</Descriptions.Item>
                <Descriptions.Item label="会员名">{datas.loginName}</Descriptions.Item>
                <Descriptions.Item label="昵称">{datas.nickname}</Descriptions.Item>
                <Descriptions.Item label="角色">{datas.role}</Descriptions.Item>
                <Descriptions.Item label="性别">{datas.sex}</Descriptions.Item>
                <Descriptions.Item label="注册时间">{moment(datas.creationTime).format('YYYY-MM-DD hh:mm:ss')}</Descriptions.Item>
                <Descriptions.Item label="出生日期" span={2}>{moment(datas.birthday).format('YYYY-MM-DD')}</Descriptions.Item>
                <Descriptions.Item label="状态"><Switch checked={!datas.isLock} checkedChildren="开启" unCheckedChildren="锁定" onClick={this.lock} /></Descriptions.Item>
                <Descriptions.Item label="积分"><InputNumber min={0} value={point} onChange={(val: any) => this.setState({ point: val })} /></Descriptions.Item>
                <Descriptions.Item label="豆币">{datas.beans}</Descriptions.Item>
                <Descriptions.Item label="余额">￥ {datas.balance}</Descriptions.Item>
                <Descriptions.Item label="QQ">{datas.qq}</Descriptions.Item>
                <Descriptions.Item label="手机">{datas.mobile}</Descriptions.Item>
                <Descriptions.Item label="电话">{datas.phone}</Descriptions.Item>
                <Descriptions.Item label="邮箱">{datas.email}</Descriptions.Item>
                <Descriptions.Item label="宝宝数">{datas.childrenNum}</Descriptions.Item>
                <Descriptions.Item label="推荐人"> <Select style={{ width: 120 }} value={datas.inviter}>{options}</Select> </Descriptions.Item>
                <Descriptions.Item label="详细地址" span={3}>{datas.address}</Descriptions.Item>
            </Descriptions>
                
                <Form layout="vertical" onFinish={this.onFinish}>                    
                    <Card style={{marginTop:'16px'}} bordered extra={
                        <Space>
                        <Button key="1" type="primary" onClick={this.UpdatePoints}>调整积分</Button>
                        <Button key="2" danger>重置密码</Button>
                        <Button key="3" type="primary" htmlType="submit">发送通知</Button>
                    </Space>
                    }>
                        <Form.Item label="标题" rules={[{ required: true }]} name="title">
                            <Input />
                        </Form.Item>
                        <Form.Item label="通知内容" rules={[{ required: true }]} name="contents">
                            <Input.TextArea rows={4} />
                        </Form.Item>
                    </Card>

                </Form>

            </div>
        )
    }
}
export default connect(({ Abp, Member }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
    Member
}))(MemberDetail);